<template>
  <div class="login">
    <h1>
      <router-link to="/register">注册</router-link>
      <i @click="backMine()" class="iconfont icon-chacha"></i>
    </h1>

    <div class="choice">
      <span @click="login('LoginContentPsd')" ref="psd">账号密码登录</span>
      <span></span>
      <span @click="login('LoginContent')" ref="id">快捷免密登录</span>
    </div>

    <div class="container">
      <keep-alive>
        <component :is="text"></component>
      </keep-alive>
    </div>
    <div class="other">
      <span></span>
      <i>其他登录方式</i>
      <span></span>
    </div>
    <div class="wechat">
      <img src="@/assets/img/weixin.png" alt="" />
      <span>微信登录</span>
    </div>
  </div>
</template>

<script>
import LoginContent from "../components/loginContent.vue";
import LoginContentPsd from "../components/loginContentPsd.vue";
export default {
  data() {
    return {
      text: "LoginContentPsd",
    };
  },
  components: {
    LoginContent,
    LoginContentPsd,
  },
  methods: {
    fun() {
      this.$router.go(-1);
    },
    login(data) {
      this.text = data;
      if (this.text == "LoginContentPsd") {
        this.$refs.psd.style.color = "black";
        this.$refs.psd.style.borderBottom = ".02rem solid green";
        this.$refs.id.style.color = "#999";
        this.$refs.id.style.borderBottom = "none";
      } else {
        this.$refs.id.style.color = "black";
        this.$refs.id.style.borderBottom = ".02rem solid green";
        this.$refs.psd.style.color = "#999";
        this.$refs.psd.style.borderBottom = "none";
      }
    },
    backMine() {
      this.$router.push("mine");
    },
  },
  activated() {
    console.log("进入到keep-alive管理的组件了");
  },
  deactivated() {
    console.log("离开了keep-alive管理的组件了");
  },
};
</script>

<style scoped>
.icon-chacha {
  font-size: 0.22rem;
}
.choice {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 0.3rem;
  height: 0.6rem;
  border-bottom: 0.01rem solid #999;
}
.choice span:nth-child(2) {
  height: 0.25rem;
  border-right: 0.01rem solid #999;
}
.choice span:nth-child(1) {
  height: 0.58rem;
  line-height: 0.58rem;
  border-bottom: 0.02rem solid green;
}
.choice span:nth-child(3) {
  height: 0.58rem;
  line-height: 0.58rem;
  color: #999;
  /* border-bottom: .02rem solid green;  */
}
h1 {
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.5rem;
}
h1 a {
  color: green;
}
.wechat {
  position: fixed;
  bottom: 0;
  height: 1.1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: #999;
}
.wechat img {
  width: 0.54rem;
  height: 0.54rem;
}
.other {
  width: 100%;
  position: fixed;
  bottom: 1.2rem;
  color: #999;
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.12rem;
}
.other span {
  height: 0.14rem;
  padding-top: 0rem;
  width: 1.4rem;
  border-bottom: 0.01rem solid rgb(209, 208, 208);
}
.other i {
  line-height: 0.3rem;
}
</style>